<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>18 </title>
  <script src="../lib/jquery-3.4.1.js"></script>
</head>
<body>
  <div class="picture">
    <img src="" alt="头像" width="100" height="130" id="avatar_img">
  </div>
  <div id="fromPic">
    <input type="file" id="avatar">
  </div>


  <script>
    // 头像预览
    $('#avatar').change(function() {
      // 拿到文件数据
      var choose_file = $(this)[0].files[0];
      // 截取图片名称小数点后的字符串
      var ftype = choose_file.name.substring(choose_file.name.lastIndexOf(".")+1);
      // 检验格式是否是图片类型
      if(ftype=="jpg" || ftype=="png" || ftype=="JPG") {
        // 限制大小，图片不能超过1M
        var size = choose_file.size/1024/1024;
        if(size > 1) {
          alert("头像不能大于1M");
          return false;
        }

        // 实例化一个阅读器对象
        var reader = new FileReader();
        // 读取文件的路径，没有返回值，结果在reader.result里
        reader.readAsDataURL(choose_file);
        // 读取需要时间，读完后再修改图片路径
        reader.onload = function() {
          // 回显图片
          $('#avatar_img').attr("src", this.result);
        }
      }else {
        alert("头像格式不对!");
      }

    })
  
  </script>
  
</body>
</html>